<template>
    <div class="bg">
        <div class="type">
            <Row :gutter="8" type="flex" justify="start">
                <Col span="3"><div></div></Col>
                <Col span="11"><div style="text-align: center">静滴</div></Col>
                <Col span="10"><div style="text-align: center">肌注</div></Col>
            </Row>
        </div>
        <div class="call">
            <Row :gutter="8" >
                <Col span="3">
                    <div class="rowbox title">
                        <span >呼叫</span>
                    </div>

                </Col>
                <Col span="11">
                    <div class="rowbox style">
                        <span>{{getcallpatientjd.patient.clinic_name}}</span>
                        <span class="name">{{getcallpatientjd.patient.name}}</span>
                    </div>
                </Col>
                <Col span="10">
                    <div class="rowbox style">
                        <span>{{getcallpatientjz.patient.clinic_name}}</span>
                        <span class="name">{{getcallpatientjz.patient.name}}</span>
                    </div>
                </Col>
            </Row>
        </div>
        <div class="line">
            <div class="vein">
                <div class="vein_title">
                    <span>等待</span>
                </div>
                <div class="vein_table">
                    <div class="vein_li">
                        <span>诊室</span>
                        <span class="vein_name">姓名</span>
                    </div>
                    <template v-for="(item, index) in getpatientjd">
                        <div class="vein_li flesh_li" :key="index" :class="index === 0?'activeclass':''">
                            <div>{{item.patient.clinic_name}}</div>
                            <div class="vein_idcard vein_name">{{item.patient.name}}</div>
                        </div>
                    </template>
                </div>
            </div>
            <div class="flesh">
                  <div  class="vein_table">
                    <div class="vein_li">
                        <span>诊室</span>
                        <span class="vein_name">姓名</span>
                    </div>
                    <template v-for="(item, index) in getpatientjz">
                        <div class="vein_li flesh_li" :key="index" :class="index === 0?'activeclass':''">
                            <div>{{item.patient.clinic_name}}</div>
                            <div class="vein_idcard vein_name">{{item.patient.name}}</div>
                        </div>
                    </template>
                </div>
            </div>
        </div>
    <div style="display:none">
        <audio ref="jdaudio" :src="jdaudio"></audio>
        <audio ref="jzaudio" :src="jzaudio"></audio>
    </div>
    </div>
</template>
<script>
    import { mapGetters, mapMutations } from 'vuex';
    export default {
        name: 'dashboard-console',
        data () {
            return {
                audiosrc: 'http://baiyou-ws-test.jgyljt.com/20220221/tmp_20220221160328.mp3'
            }
        },
        computed: {
            ...mapGetters('websocket/websocketfun', ['getpatientjz', 'getpatientjd', 'getcallpatientjz', 'getcallpatientjd', 'getqueueInfusionScreen']),
            jdaudio () {
                return this.getcallpatientjd.audio_file
            },
            jzaudio () {
                return this.getcallpatientjz.audio_file
            },
            type () {
                return this.getqueueInfusionScreen
            }

        },
        watch: {
            type: {
                handler (newValue, oldValue) {
                    var jdvid = this.$refs.jdaudio;// 获取音频对象
                    var jzvid = this.$refs.jzaudio;// 获取音频对象
                    if (jdvid.paused) {
                        if (+this.getcallpatientjd.id === +this.getqueueInfusionScreen) {
                            // this.remove_queueInfusionScreen()
                        }
                    }
                    if (jzvid.paused) {
                        if (+this.getcallpatientjz.id === +this.getqueueInfusionScreen) {
                            // this.remove_queueInfusionScreen()
                        }
                    }
                }
            },
            jdaudio: {
                handler (newValue, oldValue) {
                    var jdvid = this.$refs.jdaudio;// 获取音频对象
                    var jzvid = this.$refs.jzaudio;// 获取音频对象
                    var start = 0;// 定义循环的变量
                    var times = 3;// 定于循环的次数
                    jdvid.addEventListener('ended', () => {
                        if (+this.getcallpatientjd.id === +this.getqueueInfusionScreen) {
                            start = 3
                            jdvid.pause()
                            // this.remove_queueInfusionScreen()
                        } else {
                            jdvid.play();// 启动音频，也就是播放
                            start++;// 循环
                            if (start === times) {
                                jdvid.pause()
                                // this.remove_queueInfusionScreens(1)
                            }
                        }
                    });
                    let timer = setInterval(() => {
                        if (jzvid.paused) {
                            clearInterval(timer)
                            jdvid.play();// 启动音频，用于第一次启动
                        } else {
                            jdvid.pause()
                        }
                    }, 1000)
                }
            },
            jzaudio: {
                handler (newValue, oldValue) {
                    var jdvid = this.$refs.jdaudio;// 获取音频对象
                    var jzvid = this.$refs.jzaudio;// 获取音频对象
                    var start = 0;// 定义循环的变量
                    var times = 3;// 定于循环的次数
                    jzvid.addEventListener('ended', () => {
                        if (+this.getcallpatientjz.id === +this.getqueueInfusionScreen) {
                            start = 3
                            jzvid.pause()
                            // this.remove_queueInfusionScreen()
                        } else {
                            jzvid.play();// 启动音频，也就是播放
                            start++;// 循环
                            if (start === times) {
                                jzvid.pause()
                                // this.remove_queueInfusionScreens(2)
                            }
                        }
                    });
                    let timer = setInterval(() => {
                        if (jdvid.paused) {
                            clearInterval(timer)
                            jzvid.play();// 启动音频，用于第一次启动
                        } else {
                            jzvid.pause()
                        }
                    }, 1000)
                }
            }
        },
        methods: {
            ...mapMutations('websocket/websocketfun', ['remove_queueInfusionScreen', 'remove_queueInfusionScreens'])
        }
    }
</script>
<style>
.ivu-layout{
    height: 100%;
}
.call .ivu-row{
    margin-left: 0px !important;
    margin-right: 0px !important;
    }
.call .ivu-col-span-10{
    padding-right: 0px !important
}
</style>
<style scoped>
.bg{
   background: #2f3139;
   color: #fff;
   height: 100%;
}
.type{
    font-size: 56px;
    /* display: flex;
    justify-content: space-around; */
    background:#488ef2 ;
    font-weight: bolder;

}
.call{
    /* width: 100%; */
    background: #000;
}
.rowbox{
    height: 100px;
    background: #000;
}
.title{
    font-size: 48px;
    color: #36e99d;
    text-align: center;
    line-height:100px ;
    font-weight: bolder;
}
.style{
    background:#229565;
    font-size: 48px;
    line-height:100px ;
    font-weight: bolder;
    padding-left: 50px;
}
.name{
    margin-left: 200px;
}
.line{
    margin-top:20px;
    /* background: #000; */
    height: calc(100vh - 180px);
    display: flex;
    justify-content: flex-start;
}
.vein{
    width: 58.1%;
     background: #000;
    height: calc(100vh - 180px);
    display: flex;
    justify-content: flex-start;
}
.vein_title{
    font-size: 48px;
    color: #2d8cf0;
    text-align: center;
    line-height:160px ;
    font-weight: bolder;
    width: 28%;
    border-right: 1px solid #2f3139;
}
.vein_table{
    width: 100%;
    font-size: 20px;
}
.vein_li{
    padding: 10px 0 10px 50px;
    font-size: 48px;
    font-weight: bolder;
}
.vein_name{
    margin-left:200px;
}
.vein_idcard{
     margin-left:200px;

}
.flesh_li{
    width: 100%;
    display: flex;
}
.flesh{
    background: #000;
    height: calc(100vh - 180px);
    flex: 1;
    margin-left:8px;
}
.activeclass{
   background: #2f3139;
   color: #2d8cf0
}
</style>
